/*
 * @Description: 日期选择多选修改
 * @version: V1.0.0
 * @Author: Shuangshuang Song
 * @Date: 2020-08-20 14:10:26
 * @LastEditTime: 2020-10-27 17:14:16
 * @LastEditors: Shuangshuang Song
 */
import YearButton from './YearButton';

export default {
  props: {
    maxDate: Date,
    minDate: Date,
    displayDate: Date,
  },
  computed: {
    years() {
      const minYear = this.minDate.getFullYear();
      const maxYear = this.maxDate.getFullYear();
      const years = [];
      for (let year = minYear; year <= maxYear; year++) {
        years.push(year);
      }
      return years;
    },
  },
  methods: {
    scrollToSelectedYear(yearButtonNode) {
      const { container } = this.$refs;
      const containerHeight = container.clientHeight;
      const yearButtonNodeHeight = yearButtonNode.clientHeight || 32;
      const scrollYOffset = (yearButtonNode.offsetTop + yearButtonNodeHeight / 2) - containerHeight / 2;
      setTimeout(() => { container.scrollTop = scrollYOffset; }, 0);
    },
    // 增加日期选择多选处理
    isSelected(year) {
      if (Ext.isArray(this.displayDate)) {
        let flag = false;
        this.displayDate.forEach((item) => {
          if (year === item.getFullYear()) {
            flag = true;
          }
        });
        return flag;
      }
      return year === this.displayDate.getFullYear();
    },
    createYearButtons(h) {
      return this.years.map(year => h(YearButton, {
        props: {
          year,
          selected: this.isSelected(year),
        },
        on: {
          click: (e) => {
            e.stopPropagation();
            e.preventDefault();
            this.$emit('change', year);
          },
        },
      }));
    },
  },
  render(h) {
    return h('div', {
      staticClass: 'mu-datepicker-year-container',
    }, [
      h('div', {
        staticClass: 'mu-datepicker-year',
        ref: 'container',
      }, [
        h('div', {
          staticClass: 'mu-datepicker-year-list',
        }, this.createYearButtons(h)),
      ]),
    ]);
  },
};
